<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>SlideView - Unicorn Tests</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<link type="text/css" rel="stylesheet" href="../assets/demo/demo.css" />
<link type="text/css" rel="stylesheet" href="../yui/logger/assets/logger.css" />     
<link type="text/css" rel="stylesheet" href="../assets/testlogger.css" />

<script type="text/javascript" src="../yui-base.source.js"></script>
<script type="text/javascript" src="../yui/logger/logger.js"></script>
<script type="text/javascript" src="../yui/yuitest/yuitest.js"></script>

<script type="text/javascript" src="../build/core/Unicorn.source.js"></script>
<script type="text/javascript" src="../build/core/lang.source.js"></script>

<script type="text/javascript" src="../build/util/util.source.js"></script>
<script type="text/javascript" src="../build/util/Dom.source.js"></script>
<script type="text/javascript" src="../build/util/Event.source.js"></script>
<script type="text/javascript" src="../build/util/Effect.source.js"></script>
<script type="text/javascript" src="../build/widget/WidgetHelper.source.js"></script>

<script type="text/javascript" src="../build/widget/tabview/TabView.source.js"></script>
<script type="text/javascript" src="../build/widget/tabview/SlideView.source.js"></script>
</head>

<body>

<!-- slide-demo1 -->
<style type="text/css">
	.slide-container { position:relative; overflow:hidden; height:260px; width:250px }
	.slide-wrapper { position: absolute }
	.slide-nav {
		position:absolute; bottom:5px; right:2px;
		height:21px;
		list-style:none;
		margin:0; padding:0;
		z-index:10;
		}
	.slide-nav li.current {
			background:#74A8ED;
			border:1px solid #EEEEEE;
			color:#FFFFFF;
			font-size:16px;
			font-weight:bold;
			height:19px;
			line-height:19px;
			margin:0 3px;
			width:19px;
			}
		.slide-nav li {
			background:#FFFFFF;
			border:1px solid #74A8ED;
			color:#74A8ED;
			cursor:pointer;
			float:left;
			font-family:Arial;
			font-size:12px;
			height:15px;
			line-height:normal;
			margin:2px 3px;
			text-align:center;
			width:15px;
			}
</style>
<div class="demo-panel">
	<h3>垂直滚动效果</h3>
	<div class="slide-container" id="slide-demo1">
		<ul class="slide-wrapper">
			<li><img height="260" width="250" src="http://pics.taobao.com/forum/adminupload/900c5bc5-530e-4381-87d6-17dd5c23555a.jpg" /></li>
			<li><img src="http://pics.taobao.com/forum/adminupload/31892281-ba4c-43a8-82a0-402d5bd4d405.jpg" /></li>
			<li><img src="http://img.taobao.com/forum/adminupload/63f997e7-bba7-4a1f-940f-3373b0cb1bf3.jpg" /></li>
			<li><img src="http://cn.yimg.com/a/amyy/682662_250-260_081508.jpg" /></li>
			<li><img src="http://pics.taobao.com/forum/adminupload/0ae6b987-e977-46c5-a92b-e7594849b0c3.jpg" /></li>
		</ul>
		<ul class="slide-nav">
			<li class="current">1</li><li>2</li><li>3</li><li>4</li><li>5</li>
		</ul>
	</div>
</div>
<!-- end of slide-demo1 -->

<!-- slide-demo2 -->
<style type="text/css">
	#slide-demo2.slide-container { width: 360px; height: 190px }
	#slide-demo2 .slide-wrapper li { float: left }
</style>
<div class="demo-panel">
	<h3>水平滚动效果</h3>
	<div class="slide-container" id="slide-demo2">
		<ul class="slide-wrapper">
			<li><img width="260" height="250" src="http://pics.taobaocdn.com/bao/album/B2Cjujia/mjzb-360x190-0826-zf.jpg" /></li>
			<li><img src="http://pics.taobaocdn.com/bao/album/chl/sale/jdbx_200808011_360x190_yanhuo.jpg" /></li>
			<li><img src="http://pics.taobaocdn.com/bao/album/chl/market/huazhuangpin_080818_360x190.gif" /></li>
		</ul>
		<ul class="slide-nav">
			<li class="current">1</li><li>2</li><li>3</li>
		</ul>
	</div>
</div>
<!-- end of slide-demo2 -->

<!-- focus_change -->
<style type="text/css">
	/* Focus_change style */
	#focus_change { position:relative; width:450px; height:295px; overflow:hidden }
		#focus_change_list { position:absolute; width:1800px; height:295px; }
			#focus_change_list li { float:left; }
			#focus_change_list li img { width:450px; height:295px; }
		.focus_change_opacity { position:absolute; width:450px; height:70px; top:225px; left:0; background:#000; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; }
		#focus_change_btn { z-index: 99; position:absolute; width:450px; height:70px; top:225px; left:0; padding-bottom: 5px;/* background:#000; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5*/ }
			#focus_change_btn { padding-left:5px; }
			#focus_change_btn li { display:inline; float:left; margin:0 15px; padding-top:12px; /*filter:alpha(opacity=100); -moz-opacity:1; opacity: 1 */}
			#focus_change_btn li img { width:76px; height:50px; border:2px solid #888; }
			#focus_change_btn .current { background:url(http://www.byzuo.cn/demo/focus_change/img/icon_arrow.gif) no-repeat 37px 8px;}
			#focus_change_btn .current img { border-color:#EEE; }
</style>
<div class="demo-panel">
	<h3>土豆卡盘效果</h3>
	<div id="focus_change">
		<ul id="focus_change_list" class="focus_change_list">
			<li><img src="http://www.byzuo.cn/demo/focus_change/img/01.jpg" alt="" /></li>
			<li><img src="http://www.byzuo.cn/demo/focus_change/img/02.jpg" alt="" /></li>
			<li><img src="http://www.byzuo.cn/demo/focus_change/img/03.jpg" alt="" /></li>
			<li><img src="http://www.byzuo.cn/demo/focus_change/img/04.jpg" alt="" /></li>
		</ul>
		<div class="focus_change_opacity"></div>
		<ul id="focus_change_btn" class="focus_change_nav">
			<li class="current"><a href="#"><img src="http://www.byzuo.cn/demo/focus_change/img/btn_01.jpg" alt="" /></a></li>
			<li><a href="#"><img src="http://www.byzuo.cn/demo/focus_change/img/btn_02.jpg" alt="" /></a></li>
			<li><a href="#"><img src="http://www.byzuo.cn/demo/focus_change/img/btn_03.jpg" alt="" /></a></li>
			<li><a href="#"><img src="http://www.byzuo.cn/demo/focus_change/img/btn_04.jpg" alt="" /></a></li>
		</ul>
	</div>
</div>
<!-- focus_change end-->

<!-- slide-demo3 -->
<style type="text/css">
	#slide-demo3.slide-container { width: 500px; height: 250px }
	#slide-demo3 .slide-wrapper li { float: left; position: absolute; top: 0; left: 0 }
</style>
<div class="demo-panel">
	<h3>淡隐淡出效果</h3>
	<div class="slide-container" id="slide-demo3">
		<ul class="slide-wrapper">
			<li><img src="http://cn.yimg.com/a/ad/cherryl/686284-mall_focuspicture2_9_1.jpg" /></li>
			<li><img src="http://pics.taobaocdn.com/bao/album/b2cpromotion/zhongqiu_080829_500x250.jpg" /></li>
			<li><img src="http://cn.yimg.com/a/amyy/674127-500-250-0828.jpg" /></li>
		</ul>
		<ul class="slide-nav">
			<li class="current">1</li><li>2</li><li>3</li>
		</ul>
	</div>
</div>
<!-- end of slide-demo3 -->

<!-- slide-demo4 -->
<style type="text/css">
	#slide-demo4.slide-container { width: 400px; height: 258px }
	#slide-demo4 .slide-wrapper li { float: left; position: absolute; top: 0; left: 0 }
</style>
<div class="demo-panel">
	<h3>最普通、但性能最好、用得广泛的卡盘</h3>
	<div class="slide-container" id="slide-demo4">
		<ul class="slide-wrapper">
			<li><img src="http://pics1.paipaiimg.com/update/20080828/index_hj2_400_258.jpg" /></li>
			<li><img src="http://pics2.paipaiimg.com/update/20080901/index_ym_400_258.jpg" /></li>
			<li><img src="http://pics0.paipaiimg.com/update/20080829/index_n_400_258.jpg" /></li>
		</ul>
		<ul class="slide-nav">
			<li class="current">1</li><li>2</li><li>3</li>
		</ul>
	</div>
</div>
<!-- end of slide-demo4 -->

<script type="text/javascript">	
(function() {
	
	var Assert = YAHOO.util.Assert,
		ObjectAssert = YAHOO.util.ObjectAssert,
		ArrayAssert = YAHOO.util.ArrayAssert;
	var D = Unicorn.util.Dom,
		E = Unicorn.util.Event;
					
	var testCase = new YAHOO.tool.TestCase({
		//name of the test case
		name: "Unicorn TestCase",
		
		test_widget_SlideView: function() {
			YAHOO.log('开始 test_widget_SlideView', 'case', 'testCase');
			YAHOO.log(' - 请手动测试效果是否正常', 'wait', 'testCase');
			
			Unicorn.widget.SlideView.decorate('slide-demo1', { effect: 'scrolly' } );
			
			Unicorn.widget.SlideView.decorate('slide-demo2', { effect: 'scrollx' } );
			
			Unicorn.widget.SlideView.decorate('focus_change', 
				{ navBarCls: 'focus_change_nav',
				  panelsWrapperCls: 'focus_change_list',
				  effect: 'scrollx'
				});
			
			Unicorn.widget.SlideView.decorate('slide-demo3', { effect: 'fade', animDuration: 1 } );
			
			Unicorn.widget.SlideView.decorate('slide-demo4');
			
			
			YAHOO.log('结束 test_widget_SlideView', 'case', 'testCase');
		} 
	});
	
	var suite = new YAHOO.tool.TestSuite("testSuite");
	suite.add(testCase);
	
	YAHOO.util.Event.onDOMReady(function (){
		//create the logger
		var logger = new YAHOO.tool.TestLogger();
		
		//add the tests
		YAHOO.tool.TestRunner.add(suite);

		if (parent && parent != window) {
			YAHOO.tool.TestManager.load();
		} else {
			YAHOO.tool.TestRunner.run();
		}
	});
})();
</script>
</body>
</html>
